function Enlarge(select){
    this.ele = document.querySelector(select)
    this.show = this.ele.querySelector('.show')
    this.mask = this.ele.querySelector('.mask')
    this.list = this.ele.querySelector('.list')
    this.enlarge = this.ele.querySelector('.enlarge')

    //show 的宽高
    this.show_w = this.show.offsetWidth
    this.show_h = this.show.offsetHeight
    //mask 的 宽高
    this.mask_w = parseInt(window.getComputedStyle(this.mask).width)
    this.mask_h = parseInt(window.getComputedStyle(this.mask).height)
    //背景图 的 宽高
    this.bg_w = parseInt(window.getComputedStyle(this.enlarge).backgroundSize.split(' ')[0])
    this.bg_h = parseInt(window.getComputedStyle(this.enlarge).backgroundSize.split(' ')[1])
    this.unit()
}
Enlarge.prototype.unit = function (){
    this.scale()
    this.overOut()
    this.change()
    this.move()
}
 // 调整比例
//  enlarge 盒子尺寸 = 背景图尺寸 * mask 盒子尺寸 / show 盒子尺寸
 Enlarge.prototype.scale = function (){
    this.en_height = this.bg_h  * this.mask_h /  this.show_h
    this.en_width =  this.bg_w * this.mask_w /  this.show_w

    // 赋值
    this.enlarge.style.width = this.en_width +'px'
    this.enlarge.style.height = this.en_height +'px'
 }
 // 移入移出
Enlarge.prototype.overOut = function (){
    this.show.addEventListener('mouseover', () => {
        this.mask.style.display = 'block'
        this.enlarge.style.display = 'block'
    })
    this.show.addEventListener('mouseout', () => {
        this.mask.style.display = 'none'
        this.enlarge.style.display = 'none'
    })
}

 // 列表切换
Enlarge.prototype.change = function (){
    this.list.addEventListener('click', e => {
        e = e || window.event
        const target = e.target || e.srcElement
        if(target.nodeName === 'IMG' ){
            const show_url = target.dataset.show
            const enlarge = target.dataset.enlarge

            this.show.firstElementChild.src = show_url
            this.enlarge.style.backgroundImage = `url(${enlarge})`
            for(let i = 0; i<this.list.children.length; i++){
                this.list.children[i].classList.remove('active')
            }
            target.parentElement.classList.add('active')
        }
    })

}
 // 跟随移动
 Enlarge.prototype.move = function (){
    this.show.addEventListener('mousemove' , e =>{
        e = e || window.event
        const target = e.target || e.srcElement
        let x = e.offsetX - this.mask_w /2
        let y = e.offsetY - this.mask_h /2
        if(x <= 0 ) x = 0
        if(y <= 0 ) y = 0
        if(x >= this.show_w - this.mask_w ) x = this.show_w - this.mask_w
        if(y >= this.show_h - this.mask_h  ) y = this.show_h - this.mask_h
        this.mask.style.left = x + 'px'
        this.mask.style.top = y + 'px'
        const bx = x * this.en_width / this.mask_w
        const by = y * this.en_height / this.mask_h
        this.enlarge.style.backgroundPosition = `-${bx}px  -${by}px`
    })
 }
